<template>
  <div class="rank">
    <div class="item" v-for="item in rankList" :key="item.title">
      <h3>{{item.title}}</h3>
      <div class="list"  v-for="list in item.list" :key="list.topId">
        <div>
          <span>{{list.label}}</span>
          <ul>
            <li v-for="(song,i) in list.song" :key="song.title">
              <span>{{i+1}}.{{song.title}}-{{song.singerName}}</span>
            </li>
          </ul>
        </div>
        <div>
          <img :src="list.picUrl" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
      rankList:[]
    }
  },
  created(){
    this.getRankList()
  },
  methods:{
    getRankList(){
      axios.get("/jsososo/top/category",{
        params:{
          showDetail: 1
        }
      })
      .then(res => {
        console.log(res.data.data)
        this.rankList = res.data.data
      })
      .catch(err => {
        console.error(err); 
      })
    },
    selectRankList(item){
      const id = item.topId;
      this.Srouter.push({ path: '/ranklistdetails{id}'})
    }
  },
  
}
</script>

<style  scoped>
*{margin: 0;padding: 0;}
.rank{background-color: #eeeeee}
.list{display: flex; width: 90%;background-color:#ffffff;margin: 1rem auto;border-radius: 1rem;}
.list>div:nth-of-type(1) {width: 60%;text-align: left;padding: 0.5rem 0 0.5rem 1rem;}
.list>div:nth-of-type(2){width: 40%;}
.list>div:nth-of-type(1)>span{font-size: 1.2rem;font-weight: bolder;}
.list>div>img{width: 90%;border-top-right-radius: 1rem;border-bottom-right-radius: 1rem;}
</style>